<template>
  <div class="element-home">
    <!-- 图标 -->
    <h2>图标</h2>
    <div class="icon">
      <i class="el-icon-user-solid">el-icon-user-solid</i>
      <i class="el-icon-s-tools">el-icon-s-tools</i>
      <i class="el-icon-zoom-in">el-icon-zoom-in</i>
    </div>
    <!-- button -->
    <h2>button</h2>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    <br />
    <el-row>
      <el-button plain>朴素按钮</el-button>
      <el-button type="primary" plain>主要按钮</el-button>
      <el-button type="success" plain>成功按钮</el-button>
      <el-button type="info" plain>信息按钮</el-button>
      <el-button type="warning" plain>警告按钮</el-button>
      <el-button type="danger" plain>危险按钮</el-button>
    </el-row>
    <br />
    <el-row>
      <el-button round>圆角按钮</el-button>
      <el-button type="primary" round>主要按钮</el-button>
      <el-button type="success" round>成功按钮</el-button>
      <el-button type="info" round>信息按钮</el-button>
      <el-button type="warning" round>警告按钮</el-button>
      <el-button type="danger" round>危险按钮</el-button>
    </el-row>
    <br />
    <el-row>
      <el-button icon="el-icon-search" circle></el-button>
      <el-button type="primary" icon="el-icon-edit" circle></el-button>
      <el-button type="success" icon="el-icon-check" circle></el-button>
      <el-button type="info" icon="el-icon-message" circle></el-button>
      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
      <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>
    <!-- message -->
    <h2>message</h2>
    <el-button :plain="true" @click="messageSuccess">成功</el-button>
    <el-button :plain="true" @click="messageWarning">警告</el-button>
    <el-button :plain="true" @click="messageError">错误</el-button>
    <!-- Dialog -->
    <h2>Dialog</h2>
    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
    <el-dialog title="提示" v-model="dialogVisible" width="30%" :before-close="handleClose">
      <span>这是一段信息</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- switch -->
    <h2>switch</h2>
    <el-switch v-model="switchValue" active-color="#13ce66" inactive-color="#ff4949" @change="switchChange"></el-switch>
    <!-- input -->
    <h2>input</h2>
    <el-input v-model="myInput" placeholder="请输入内容"></el-input>
    <el-input type="textarea" placeholder="请输入内容" v-model="textarea" maxlength="30" show-word-limit></el-input>
    <!-- Select 选择器 -->
    <h2>Select 选择器</h2>
    <el-select v-model="seletValue" placeholder="请选择">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, watchEffect } from 'vue'
export default {
  name: 'ElementHome',
  data() {
    return {
      errorMessage: '出错了啊啊啊！'
    }
  },
  methods: {
    messageError() {
      this.$message.error(this.errorMessage)
    }
  },
  setup() {
    /**
     * 消息提醒
     */
    const messageSuccess = () => {
      ElMessage.success({
        showClose: true,
        message: '恭喜你，这是一条成功消息',
        type: 'success'
      })
    }
    const messageWarning = () => {
      ElMessage.warning('很遗憾的通知你未能通过！')
    }
    /**
     * 弹窗
     */
    let dialogVisible = ref(false)
    const handleClose = (done) => {
      ElMessageBox.confirm('确认关闭？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          done()
        })
        .catch(() => {})
    }
    /**
     * switch
     */
    let switchValue = ref(false)
    const switchChange = () => {
      console.log(switchValue.value)
    }
    /**
     * input
     */
    let myInput = ref()
    let textarea = ref()
    /**
     * selet选择器
     */
    let seletValue = ref()
    let options = [
      {
        value: '选项1',
        label: '黄金糕'
      },
      {
        value: '选项2',
        label: '双皮奶'
      },
      {
        value: '选项3',
        label: '蚵仔煎'
      },
      {
        value: '选项4',
        label: '龙须面'
      },
      {
        value: '选项5',
        label: '北京烤鸭'
      }
    ]
    /**
     * watchEffect
     */
    watchEffect(() => {
      console.log(myInput.value)
      console.log(textarea.value)
      console.log(seletValue.value)
    })
    return {
      messageSuccess,
      messageWarning,
      dialogVisible,
      handleClose,
      switchValue,
      switchChange,
      myInput,
      textarea,
      seletValue,
      options
    }
  }
}
</script>
<style lang="scss">
.element-home {
  margin: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  text-align: left;
  h2 {
    margin: 10px 0;
  }
  .icon {
    i {
      margin: 10px;
    }
  }
}
</style>
